<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期控件</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/jquery.datetimepicker.css">
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container-fluid">
	<h3>日期控件-基于Jquery</h3>
    <div class="form">
    	<ul class="list-unstyled">
        	<li class="col-md-12">
            	<div class="form-group">
                    <label>默认形式</label>
                    <input type="text" id="datepicker1" class="form-control">
                </div>
            </li>
            <li class="col-md-12">
            	<div class="form-group">
                    <label>不带时间</label>
                    <input type="text" id="datepicker2" class="form-control">
                </div>
            </li>
            <li class="col-md-12">
            	<div class="form-group">
                    <label>带时间选择器</label>
                    <input type="text" id="datepicker3" class="form-control">
                </div>
            </li>
        </ul>
    </div>
    <h3>Html Code</h3>
   	<div>
        <pre>
            
            &lt;input type="text" id="datepicker1" class="form-control"&gt;
        </pre>
    </div>
    <h3>Js Code</h3>
    <div>
        <pre>
        
            &lt;!--引用CSS--&gt;
            &lt;link rel="stylesheet" href="../../Content/css/jquery.datetimepicker.css"&gt;
            &lt;!--引用JS--&gt;
            &lt;script src="../../Scripts/jquery.datetimepicker.js"&gt;&lt;/script&gt;
            &lt;!--基本调用--&gt;
            $("#datepicker1").datetimepicker({
                format:'Y/m/d H:i:s'  //时间格式化,默认方式
                ,timepicker:false	  //是否显示时间选择面板
            });
        </pre>
    </div>
</div>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/jquery.datetimepicker.js"></script>
<script>
	$(function() {
		$("#datepicker1").datetimepicker({
			format:'Y/m/d H:i:s'
			,timepicker:false
		});
		
		$("#datepicker2").datetimepicker({
			format:'Y/m/d'
			,timepicker:false
		});
		$("#datepicker3").datetimepicker({
			timepicker:true
		});
	});
</script>
</body>
</html>
